<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="main" style="width: 600px; height:400px;"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    
    // 初始 option
    option = {
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: []
      }]
    };
    myChart.setOption(option)


    // 显示loading
    myChart.showLoading()
    function fetchData(cb) {
      // 通过 setTimeout 模拟异步加载
      setTimeout(function () {
        cb({
          categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          data: [5, 20, 36, 10, 10, 20]
        });
      }, 1000);
    }
    
    fetchData(function (data) {
      // 隐藏Loading
      myChart.hideLoading()
      // 重新指定配置更新图表
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根据名字对应到相应的系列
          name: '销量',
          data: data.data
        }]
      });
    });


    //异步加载数据，数据回来之前我们设置选项目的是为了出现坐标轴，但是此时没数据，图标是形成不了
    //当数据回来的时候，切记需要重新再次设置选项，只需要设置有数据的项

  </script>
</body>

</html>
